<template>
	<view>
		<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share></uni-popup-share>
		</uni-popup>
	</view>

	<view class="main">

		<uni-nav-bar left-icon="left" @clickLeft="gotoindex()" height="30px">
			<view class="daohanglanhezi">
				<image class="shoucang" src="../../static/img/yishoucang.png" mode=""></image>
			</view>
			<view class="daohanglanhezi" @click="shareToggle">
				<image class="fenxiang" src="../../static/img/fenxiang.png" mode=""></image>
			</view>
		</uni-nav-bar>



		<view class="word">
			<view style="margin-top: 10px;font-weight: bold;">蛋花豆腐羹</view>
			<view style="margin-top: 15px;opacity: 0.5;font-size: 10px;">9555次浏览 2222人喜欢</view>
			<view class="shicai">
				<view style="margin-top: 10px;font-weight: bold;font-size: 14px;">主要食材：</view>
				<view style="margin-top: 10px;font-size: 14px;">鸡蛋、南豆腐西红柿、玉米、胡萝卜等</view>
			</view>
		</view>
		<view class="jx1"></view>
		<view class="jieshao">
			第一步是，在锅中倒入适量的水，加热，然后把豆腐放入锅中焯一会去腥，捞起来晾凉之后，再切成小正方块。接着取1~2个鸡蛋，喜欢的就多取几个，统一打散到碗里搅拌，放在一边待会用。

			做完以上步骤，准备工作就完成了。第二步是在锅中倒入适量的水和油，放入切好的豆腐块。如果你准备了玉米粒，也是这个时候放。

			等到再煮一会，就把鸡蛋液倒入锅中，有西红柿的话，就一起放吧，再加点盐，过一会就能吃啦。
		</view>
		<view class="container">
			<view class="heart"></view>
			<view class="heart" :class="hasChange ? 'like' : '' "></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				hasChange: false,
				

			}
		},
		onLoad() {
			this.hasChange = true;
		},
		
		methods: {

			gotoindex() {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},
			shareToggle() {
				this.$refs.share.open()
			}
			


		}
	}
</script>

<style>

	uni-nav-bar {
		margin-top: 30px;
		display: flex;
		width: 100%;
	}
	uni-nav-bar image {
		margin-top: 6px;
		width: 25px;
		height: 25px;

	}
	.shoucang{
		margin-left: 10px;
	}
	.fenxiang{
		margin-left: 10px;
	}

	.daohanglanhezi {
		width: 30px;
		height: 30px;
		display: flex;
	}

	.main {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		/* align-items: center;	 */
	}

	.word {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		/* align-items: center; */
		width: 90%;
		margin-left: 19px;
	}

	.jx1 {
		width: 90%;
		height: 120px;
		background-color: #f2f2f2;
		border-radius: 3px;
		margin-top: 10px;
		margin-left: 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.shicai {
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		/* align-items: flex-start;	 */
	}

	.jieshao {
		width: 90%;
		margin-top: 10px;
		margin-left: 18px;
		line-height: 30px;
		font-size: 13px;
	}

	.heart {
		/*设置弹性布局*/
		display: flex;
		margin: 50upx auto;
		width: 40upx;
		height: 30upx;
		/*通过过滤器设置元素内阴影样式*/
		filter: drop-shadow(0 1upx 1upx #d9d9da);
		/*设置元素动画效果*/
		animation: breath 2s ease infinite;
	}

	.heart::before,
	.heart::after {
		content: '';
		/*创建的两个伪元素各占一份*/
		flex: 1;
		height: 30upx;
		/*设置边框四个角的大小 顺序是：上、右、下、左*/
		border-radius: 20upx 20upx 4upx 4upx;
		/*设置图形变形（旋转、拉伸等）的原点*/
		transform-origin: 50% 6upx;
		background-color: #d9d9da;
	}

	.heart.like::before,
	.heart.like::after {
		background: red;
		filter: drop-shadow(0 1upx 1upx #973340a3);
	}

	.heart::before {
		/*元素根据设置的原点逆时针旋转45度*/
		transform: rotate(-45deg);
	}

	.heart::after {
		/*元素根据设置的原点顺时针旋转45度*/
		transform: rotate(45deg);
	}
	

</style>
